<template>
    <div class="flexbox flexcolumn height_100">
        <div class="flex over_box">
            <AddBulkBid :dataForm="dataForm" @sessionSave="sessionSave" ref="bug_ref"/>
            <el-form ref="createform" :model="dataForm" label-position="top" class="create_form" :hide-required-asterisk='true' size="small">
                <div class="com_box">
                    <StepBox :dataForm="dataForm" />
                    <div class="pl_20 pr_20 hide_box">
                        <TargetType :dataForm="dataForm"/>
                        <div class="tk_title">广告组设置</div>
                        <AdGroupName :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <AdGroupStatus :dataForm="dataForm" @sessionSave="sessionSave"/>
                    </div>
                </div>
                <div class="com_box pl_20 pr_20 mt_12 hide_box">
                    <div class="tk_title">广告位</div>
                    <Position :dataForm="dataForm"/>
                    <CommentStatus :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <VideoStatus :dataForm="dataForm" @sessionSave="sessionSave"/>
                </div>
                <div class="com_box pt_20 pl_20 pr_20 mt_12 hide_box">
                    <DeliveryList :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <div class="tk_title">预算&排期</div>
                    <AdBudget :dataForm="dataForm" @sessionSave="sessionSave" @addBulkBid="addBulkBid"/>
                    <AdScheduling :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <AdTime :dataForm="dataForm" @sessionSave="sessionSave" v-if="dataForm.adgroup.delivery[dataForm.delivery_index].schedule_type=='SCHEDULE_FROM_NOW'" key="SCHEDULE_FROM_NOW" />
                    <AdTime2 :dataForm="dataForm" @sessionSave="sessionSave" v-else-if="dataForm.adgroup.delivery[dataForm.delivery_index].schedule_type=='SCHEDULE_START_END'" key="SCHEDULE_START_END" />
                    <AdPeriod :dataForm="dataForm" @sessionSave="sessionSave" />
                    <div class="divider_line"></div>
                    <div class="tk_title">出价&优化</div>
                    <OptObject :dataForm="dataForm" @sessionSave="sessionSave" />
                    <OptStrategy :dataForm="dataForm" @sessionSave="sessionSave" />
                    <OptBudgetCpc :dataForm="dataForm" @sessionSave="sessionSave" key="CLICK" v-if="dataForm.adgroup.delivery[dataForm.delivery_index].optimization_goal=='CLICK'&&dataForm.adgroup.delivery[dataForm.delivery_index].bid_type=='BID_TYPE_CUSTOM'" />
                    <OptBudgetOcpm :dataForm="dataForm" @sessionSave="sessionSave" key="CONVERT" v-else-if="(dataForm.adgroup.delivery[dataForm.delivery_index].optimization_goal=='CONVERT'||dataForm.adgroup.delivery[dataForm.delivery_index].optimization_goal=='CONVERT1')&&dataForm.adgroup.delivery[dataForm.delivery_index].bid_type=='BID_TYPE_CUSTOM'" />
                    <OptDeepPrice :dataForm="dataForm" @sessionSave="sessionSave" v-if="dataForm.adgroup.delivery[dataForm.delivery_index].optimization_goal=='VALUE'" />
                    <OptBilling :dataForm="dataForm" />
                    <OptSpeed :dataForm="dataForm" @sessionSave="sessionSave" />
                </div>
                <div class="com_box pt_20 pl_20 pr_20 mt_12 hide_box">
                    <DirectionalList :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <div class="tk_title">受众定向</div>
                    <AduceRegion :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <AduceGender :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <AduceAge :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <AduceDevice :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <AduceCrowd :dataForm="dataForm" @sessionSave="sessionSave"/>
                    <el-form-item label="兴趣和行为">
                        <Interest :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <VideoAction :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <CreatAction :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <TallAction :dataForm="dataForm" @sessionSave="sessionSave"/>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="tk_footer com_box mt_12">
            <el-button plain class="el-button-width plain_red" size="small" @click="cancelCreation">取消创建</el-button>
            <el-button plain class="el-button-width" size="small" @click="preStep">上一步</el-button>
            <el-button type="primary" class="el-button-width" size="small" @click="nextOne('createform')">下一步</el-button>
        </div>
    </div>
</template>

<script>
import "@/assets/css/tiktok.css";
import {mixins} from '@/assets/js/tkmixins.js'
import StepBox from "./model/StepBox";
import TargetType from "./model/TargetType";
import AdGroupName from "./model/AdGroupName";
import AdGroupStatus from "./model/AdGroupStatus";
import Position from "./model/Position";
import CommentStatus from "./model/CommentStatus";
import VideoStatus from "./model/VideoStatus";
import DeliveryList from "./model/DeliveryList";
import AdBudget from "./model/AdBudget";
import AdScheduling from "./model/AdScheduling";
import AdTime from "./model/AdTime";
import AdTime2 from "./model/AdTime2";
import AdPeriod from "./model/AdPeriod";
import OptObject from "./model/OptObject";
import OptStrategy from "./model/OptStrategy";
import OptDeepPrice from "./model/OptDeepPrice";
import OptBudgetCpc from "./model/OptBudgetCpc";
import OptBudgetOcpm from "./model/OptBudgetOcpm";
import OptBilling from "./model/OptBilling";
import OptSpeed from "./model/OptSpeed";
import DirectionalList from "./model/DirectionalList";
import AduceRegion from "./model/AduceRegion";
import AduceGender from "./model/AduceGender";
import AduceAge from "./model/AduceAge";
import AduceDevice from "./model/AduceDevice";
import AduceCrowd from "./model/AduceCrowd";
import Interest from "./model/Interest";
import VideoAction from "./model/VideoAction";
import CreatAction from "./model/CreatAction";
import TallAction from "./model/TallAction";
import AddBulkBid from './model/AddBulkBid'

export default {
    props: ["dataForm"],
    mixins: [mixins],
    components: {
        StepBox,
        TargetType,
        AdGroupName,
        AdGroupStatus,
        Position,
        CommentStatus,
        VideoStatus,
        DeliveryList,
        AdBudget,
        AdScheduling,
        AdTime,
        AdTime2,
        AdPeriod,
        OptObject,
        OptStrategy,
        OptDeepPrice,
        OptBudgetCpc,
        OptBudgetOcpm,
        OptBilling,
        OptSpeed,
        DirectionalList,
        AduceRegion,
        AduceGender,
        AduceAge,
        AduceDevice,
        AduceCrowd,
        Interest,
        VideoAction,
        CreatAction,
        TallAction,
        AddBulkBid
    },
    name: "",
    data() {
        return {
           
        };
    },
    created() {
        
    },
    methods: {

        // 提交添加
        nextOne(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.dataForm.step = 4;
                    window.sessionStorage.setItem(
                        "tkForm",
                        JSON.stringify(this.dataForm)
                    );
                } else {
                    this.$message.error("请完善信息！");
                    return false;
                }
            });
        },

        // 添加预算
        addBulkBid(){
            this.$refs.bug_ref.getData()
        },

        // 上一步
        preStep() {
            this.dataForm.step = 2;
            this.sessionSave();
        },

        sessionSave() {
            window.sessionStorage.setItem(
                "tkForm",
                JSON.stringify(this.dataForm)
            );
        },
    },
};
</script>


<style scoped>
.divider_line{
    border-top: 1px solid #DCDEE2;
    transform: scaleY(0.5);
}
.hide_box{
    overflow: hidden;
}
</style>

